Opdracht

1. Zet de volgende wireframe om in HTML. Schrijf de HTML in een bestand met de naam biblio/books.html:

   

2. Jullie krijgen de HTML voor de artilelen cadeau, je vind die aan aan het einde van deze webpagina.
3. Maak de lay-out voor deze pagina met behulp van flexbox. Schrijf de CSS in het zelfde bestand als voor de homepagina, namelijk css/biblio.css. Zorg dat je niet in conflict komt met de selecteren die voor de homepagina gebruikt worden. Gebruik desnoods klassen om het verschil te maken. De homepagina moet blijven werken!!! Gebruik wat je in de labolessen hebt ingeoefend:
   1. CSS lay-out met flexbox case study biblio - homepagina
   2. CSS lay-out met flexbox case study biblio - horizontale navigatie
   3. CSS lay-out met flexbox case study biblio - article
4. Wijzig de horizontale navigatie zodat je naar home- en boekenpagina kan springen.
5. HTML voor artikelen:

   <article>
       <figure><img
               src="image/cover/Alain Bihr Michel Husson---Thomas Piketty - Une critique illusoire du Capital.jpg"
               alt="cover van het boek Thomas Piketty - Une critique illusoire du Capital geschreven door Alain Bihr Michel Husson">
           <figcaption><cite>Thomas Piketty, Une critique illusoire du Capital</cite>
               <address>Alain Bihr Michel Husson</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Alain Testart---Avant l--histoire.jpg"
               alt="cover van het boek Avant l'histoire geschreven door Alain Testart">
           <figcaption><cite>Avant l'histoire</cite>
               <address>Alain Testart</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Alain Testart---L--amazone et la cuisiniere.jpg"
               alt="cover van het boek L'amazone et la cuisiniere geschreven door Alain Testart">
           <figcaption><cite>L'amazone et la cuisinière</cite>
               <address>Alain Testart</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Bronislaw Malinowski---La vie sexuelle des sauvages.jpg"
               alt="cover van het boek La vie sexuelle des sauvages geschreven door Bronislaw Malinowski">
           <figcaption><cite>La vie sexuelle des sauvages</cite>
               <address>Bronislaw Malinowski</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Carel van Schalk - Kai Michel---De waarheid over Eva.jpg"
               alt="cover van het boek De waarheid over Eva geschreven door Carel van Schalk - Kai Michel">
           <figcaption><cite>De waarheid over Eva</cite>
               <address>Carel van Schalk, Kai Michel</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Carolyn Steel---De hongerige stad.jpg"
               alt="cover van het boek De hongerige stad geschreven door Carolyn Steel">
           <figcaption><cite>De hongerige stad</cite>
               <address>Carolyn Steel</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Fatiha Agag-Boudjahlat---Le grand detournement.jpg"
               alt="cover van het boek Le grand detournement geschreven door Fatiha Agag-Boudjahlat">
           <figcaption><cite>Le grand detournement</cite>
               <address>Fatiha Agag-Boudjahlat</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Hans Rosling - Ola Rosling - Anna Rosling Ronnlund---Feitenkennis.jpg"
               alt="cover van het boek Feitenkennis geschreven door Hans Rosling - Ola Rosling - Anna Rosling Ronnlund">
           <figcaption><cite>Feitenkennis</cite>
               <address>Hans Rosling, Ola Rosling, Anna Rosling Ronnlund</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Hegel---Fenomenologie van de geest.jpg"
               alt="cover van het boek Fenomenologie van de geest geschreven door Hegel">
           <figcaption><cite>Fenomenologie van de geest</cite>
               <address>Hegel</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Ico Maly---Hedendaagse antiverlichting.jpg"
               alt="cover van het boek Hedendaagse antiverlichting geschreven door Ico Maly">
           <figcaption><cite>Hedendaagse antiverlichting</cite>
               <address>Ico Maly</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Jack Halberstam---Female Masculinity.jpg"
               alt="cover van het boek Female Masculinity geschreven door Jack Halberstam">
           <figcaption><cite>Female Masculinity</cite>
               <address>Jack Halberstam</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/James Walvin---How Sugar Corrupted The World.jpg"
               alt="cover van het boek How Sugar Corrupted The World geschreven door James Walvin">
           <figcaption><cite>How Sugar Corrupted The World</cite>
               <address>James Walvin</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Jane Gleeson-White---Double Entry.jpg"
               alt="cover van het boek Double Entry geschreven door Jane Gleeson-White">
           <figcaption><cite>Double Entry</cite>
               <address>Jane Gleeson-White</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Jean-Francois Kahn---Droit dans le mur.jpg"
               alt="cover van het boek Droit dans le mur geschreven door Jean-Francois Kahn">
           <figcaption><cite>Droit dans le mur</cite>
               <address>Jean-Francois Kahn</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Joseph Ponthus---Aan de lopende band.jpg"
               alt="cover van het boek Aan de lopende band geschreven door Joseph Ponthus">
           <figcaption><cite>Aan de lopende band</cite>
               <address>Joseph Ponthus</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Karl Marx---Het kapitaal.jpg"
               alt="cover van het boek Het kapitaal geschreven door Karl Marx">
           <figcaption><cite>Het kapitaal</cite>
               <address>Karl Marx</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Kathy Acker---Literal Madness.jpg"
               alt="cover van het boek Literal Madness geschreven door Kathy Acker">
           <figcaption><cite>Literal Madness</cite>
               <address>Kathy Acker</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Kent Flannery - Joyce Marcus---The Creation of Inequality.jpg"
               alt="cover van het boek The Creation of Inequality geschreven door Kent Flannery - Joyce Marcus">
           <figcaption><cite>The Creation of Inequality</cite>
               <address>Kent Flannery, Joyce Marcus</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Kim Ghattas---Zwarte golf.jpg"
               alt="cover van het boek Zwarte golf geschreven door Kim Ghattas">
           <figcaption><cite>Zwarte golf</cite>
               <address>Kim Ghattas</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Klaartje Schrijvers---Het archief van Walter.jpg"
               alt="cover van het boek Het archief van Walter geschreven door Klaartje Schrijvers">
           <figcaption><cite>Het archief van Walter</cite>
               <address>Klaartje Schrijvers</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Martin Heidegger---Hegel--s Phenomenology of Spirit.jpg"
               alt="cover van het boek Hegel's Phenomenology of Spirit geschreven door Martin Heidegger">
           <figcaption><cite>Hegel's Phenomenology of Spirit</cite>
               <address>Martin Heidegger</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Michael J Sandel---De tirannie van verdienste.jpg"
               alt="cover van het boek De tirannie van verdienste geschreven door Michael J Sandel">
           <figcaption><cite>De tirannie van verdienste</cite>
               <address>Michael J Sandel</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Noreena Hertz---De eenzame eeuw.jpg"
               alt="cover van het boek De eenzame eeuw geschreven door Noreena Hertz">
           <figcaption><cite>De eenzame eeuw</cite>
               <address>Noreena Hertz</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Rai Patel and Jason Moore---A History of the World in Seven Cheap Things.jpg"
               alt="cover van het boek A History of the World in Seven Cheap Things geschreven door Rai Patel and Jason Moore">
           <figcaption><cite>A History of the World in Seven Cheap Things</cite>
               <address>Rai Patel and Jason Moore</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img
               src="image/cover/Rai Patel en Jason Moore---Een geschiedenis van de wereld in zeven goedkope zaken.jpg"
               alt="cover van het boek Een geschiedenis van de wereld in zeven goedkope zaken geschreven door Rai Patel en Jason Moore">
           <figcaption><cite>Een geschiedenis van de wereld in zeven goedkope zaken</cite>
               <address>Rai Patel en Jason Moore</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Sanjida O-Connell---Sugar.jpg"
               alt="cover van het boek Sugar geschreven door Sanjida O-Connell">
           <figcaption><cite>Sugar</cite>
               <address>Sanjida O-Connell</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Sidney W Mintz---Sweetness and Power.jpg"
               alt="cover van het boek Sweetness and Power geschreven door Sidney W Mintz">
           <figcaption><cite>Sweetness and Power</cite>
               <address>Sidney W Mintz</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Silvia Federici---Le capitalisme patriarcal.jpg"
               alt="cover van het boek Le capitalisme patriarcal geschreven door Silvia Federici">
           <figcaption><cite>Le capitalisme patriarcal</cite>
               <address>Silvia Federici</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Stephanie Roza---La gauche contre les Lumieres.jpg"
               alt="cover van het boek La gauche contre les Lumieres geschreven door Stephanie Roza">
           <figcaption><cite>La gauche contre les Lumieres</cite>
               <address>Stephanie Roza</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Silvia Federici---Caliban et la sorciere.jpg"
               alt="cover van het boek Caliban et la sorciere- geschreven door Sylvia Federici">
           <figcaption><cite>Caliban et la sorciere-</cite>
               <address>Sylvia Federici</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Thomas Piketty---Capital et ideologie.jpg"
               alt="cover van het boek Capital et ideologie geschreven door Thomas Piketty">
           <figcaption><cite>Capital et ideologie</cite>
               <address>Thomas Piketty</address>
           </figcaption>
       </figure>
   </article>
   <article>
       <figure><img src="image/cover/Wilfried Jannsens---Voltaire man van zaken.jpg"
               alt="cover van het boek Voltaire man van zaken geschreven door Wilfried Jannsens">
           <figcaption><cite>Voltaire man van zaken</cite>
               <address>Wilfried Jannsens</address>
           </figcaption>
       </figure>
   </article>